<template>
    <div class="admin-app">
        <el-container>
            <el-header>
                <el-button type="primary" @click="toggleDark">切换暗黑模式</el-button>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-scrollbar>
                        <el-menu :default-openeds="['1']" class="el-menu-vertical-demo"
                            :class="{ 'elmenu-dark': isDark }" default-active="2" text-color="#000" router>
                            <!-- <el-sub-menu index="1">
                <template #title>
                  <el-icon><message /></el-icon>Navigator One
                </template>
<el-menu-item-group>
    <template #title>Group 1</template>
    <el-menu-item index="user">Option 1</el-menu-item>
    <el-menu-item index="role">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
    <el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
    <template #title>Option4</template>
    <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu> -->

                            <!-- <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>Navigator Two
                </template>
                <el-menu-item-group>
                  <template #title>Group 1</template>
                  <el-menu-item index="2-1">Option 1</el-menu-item>
                  <el-menu-item index="2-2">Option 2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group 2">
                  <el-menu-item index="2-3">Option 3</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="2-4">
                  <template #title>Option 4</template>
                  <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
                </el-sub-menu>
              </el-sub-menu> -->

                            <template v-for="item in routeList">
                                <template v-if="!item.children">
                                    <el-menu-item :index="item.path" :key="item.name">
                                        <el-icon>
                                            <setting />
                                        </el-icon>
                                        <template #title>{{ item!.meta?.title || item.name }}</template>
                                    </el-menu-item>
                                </template>

                                <template v-else>
                                    <el-sub-menu :index="item.path" :key="item.name">
                                        <template #title>
                                            <el-icon>
                                                <setting />
                                            </el-icon>
                                            {{ item!.meta?.title || item.name }}
                                        </template>

                                        <el-menu-item :index="item.path + '/' + sonItem.path"
                                            v-for="sonItem in item.children" :key="sonItem.name">
                                            {{ sonItem!.meta?.title || sonItem.name }}
                                        </el-menu-item>
                                    </el-sub-menu>
                                </template>
                            </template>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-scrollbar>
                            <RouterView />
                        </el-scrollbar>
                    </el-main>
                    <el-footer :class="{ 'el-footer-dark': isDark }">
                        <p>@copy by 富豪班 ©️2025</p>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { routesList } from '@/router/index'
import { ref } from 'vue'
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import { useDark } from '@vueuse/core'

const routeList = ref<any>(routesList)

const isDark = useDark()

const toggleDark = () => {
    isDark.value = !isDark.value
}

</script>

<style lang="scss" scoped>
.admin-app {
    height: 100%;
    width: 100%;
}

.el-container {
    height: 100%;
}

.el-header {
    // background-color: rgba(34, 147, 162, 0.186);
    padding: 0 10px;
}

.el-aside {
    // background-color: rgb(176, 220, 127);
}

.el-main {
    // background-color: rgb(111, 145, 179);
    padding: 10px;
    height: calc(100vh - 120px);
}

.el-footer {
    // background-color: rgb(172, 102, 183);
    padding: 0 10px;
    // color: #fff;
    display: grid;
    place-items: center;
}

.el-scrollbar {
    height: calc(100vh - 60px);
}
</style>
